<template>
  <fieldset>
    <legend>三级联动</legend>
    <!-- 省 -->
    <select name="" id="" v-model="sel1" @change="provienceChange(sel1)">
      <option :value="item.id" v-for="item in provience" :key="item.id">{{item.address}}</option>
    </select>
    <!-- 市 -->
    <select name="" id="" v-model="sel2" @change="provienceChanges(sel2)">
      <option :value="item.id" v-for="item in city" :key="item.id" >{{item.address}}</option>
    </select>
    <!-- 县 -->
    <select name="" id="" v-model="sel3">
      <option :value="item.id" v-for="item in qu" :key="item.id">{{item.address}}</option>
    </select>
  </fieldset>
</template>

<script>
import * as api from "./api/select"
 export default{
  data(){
    return{
      provience:[],
      sel1:'',
      city:[],
      sel2:'',
      qu:[],
      sel3:''
    }
  },
  mounted(){
    api.fetchData()
    .then(res=>{
      this.provience = res
      this.sel1 = res[0].id
      this.provienceChange(this.sel1)
    })   
  },
  methods:{
    provienceChange(it){
       api.fetchCity(it)
      .then(res=>{
        this.city = res
        this.sel2 = res[0].id
        this.provienceChanges(this.sel2)
      })
    },
    provienceChanges(it){
       api.fetchCity(it)
      .then(res=>{
        this.qu = res
        if(res.length>0){
          this.sel3 = res[0].id
        }
      })
    },
    
  }
 }

</script>
 



<style>
  select{
    width: 100px;
  }
</style>